<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        height: 100px;
        border: 1px solid red;
        margin: 20px;
        overflow: auto;
      }
      .show {
        opacity: 1;
      }
      .hide {
        opacity: 0;
      }
      #target {
        width: max-content;
      }
    </style>
  </head>
  <body>
    <script>
      function dragoverHandler(ev) {
        ev.preventDefault();
        ev.dataTransfer.dropEffect = "move";
      }
      function dropHandler(ev) {
        ev.preventDefault();
        // Get the id of the target and add the moved element to the target's DOM
        const data = ev.dataTransfer.getData("text/plain");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>

    <p
      id="target"
      ondrop="dropHandler(event)"
      ondragover="dragoverHandler(event)"
    >
      Drop Zone
    </p>
    <hr>
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
      <li>60</li>
      <li>61</li>
      <li>62</li>
      <li>63</li>
      <li>64</li>
      <li>65</li>
      <li>66</li>
      <li>67</li>
      <li>68</li>
      <li>69</li>
      <li>70</li>
      <li>71</li>
      <li>72</li>
      <li>73</li>
      <li>74</li>
      <li>75</li>
      <li>76</li>
      <li>77</li>
      <li>78</li>
      <li>79</li>
      <li>80</li>
      <li>81</li>
      <li>82</li>
      <li>83</li>
      <li>84</li>
      <li>85</li>
      <li>86</li>
      <li>87</li>
      <li>88</li>
      <li>89</li>
      <li>90</li>
      <li>91</li>
      <li>92</li>
      <li>93</li>
      <li>94</li>
      <li>95</li>
      <li>96</li>
      <li>97</li>
      <li>98</li>
      <li>99</li>
      <li>100</li>
      <li>101</li>
      <li>102</li>
      <li>103</li>
      <li>104</li>
      <li>105</li>
      <li>106</li>
      <li>107</li>
      <li>108</li>
      <li>109</li>
      <li>110</li>
      <li>111</li>
      <li>112</li>
      <li>113</li>
      <li>114</li>
      <li>115</li>
      <li>116</li>
      <li>117</li>
      <li>118</li>
      <li>119</li>
      <li>120</li>
      <li>121</li>
      <li>122</li>
      <li>123</li>
      <li>124</li>
      <li>125</li>
      <li>126</li>
      <li>127</li>
      <li>128</li>
      <li>129</li>
      <li>130</li>
      <li>131</li>
      <li>132</li>
      <li>133</li>
      <li>134</li>
      <li>135</li>
      <li>136</li>
      <li>137</li>
      <li>138</li>
      <li>139</li>
      <li>140</li>
      <li>141</li>
      <li>142</li>
      <li>143</li>
      <li>144</li>
      <li>145</li>
      <li>146</li>
      <li>147</li>
      <li>148</li>
      <li>149</li>
      <li>150</li>
      <li>151</li>
      <li>152</li>
      <li>153</li>
      <li>154</li>
      <li>155</li>
      <li>156</li>
      <li>157</li>
      <li>158</li>
      <li>159</li>
      <li>160</li>
      <li>161</li>
      <li>162</li>
      <li>163</li>
      <li>164</li>
      <li>165</li>
      <li>166</li>
      <li>167</li>
      <li>168</li>
      <li>169</li>
      <li>170</li>
      <li>171</li>
      <li>172</li>
      <li>173</li>
      <li>174</li>
      <li>175</li>
      <li>176</li>
      <li>177</li>
      <li>178</li>
      <li>179</li>
      <li>180</li>
      <li>181</li>
      <li>182</li>
      <li>183</li>
      <li>184</li>
      <li>185</li>
      <li>186</li>
      <li>187</li>
      <li>188</li>
      <li>189</li>
      <li>190</li>
      <li>191</li>
      <li>192</li>
      <li>193</li>
      <li>194</li>
      <li>195</li>
      <li>196</li>
      <li>197</li>
      <li>198</li>
      <li>199</li>
      <li>200</li>
      <li>201</li>
      <li>202</li>
      <li>203</li>
      <li>204</li>
      <li>205</li>
      <li>206</li>
      <li>207</li>
      <li>208</li>
      <li>209</li>
      <li>210</li>
      <li>211</li>
      <li>212</li>
      <li>213</li>
      <li>214</li>
      <li>215</li>
      <li>216</li>
      <li>217</li>
      <li>218</li>
      <li>219</li>
      <li>220</li>
      <li>221</li>
      <li>222</li>
      <li>223</li>
      <li>224</li>
      <li>225</li>
      <li>226</li>
      <li>227</li>
      <li>228</li>
      <li>229</li>
      <li>230</li>
      <li>231</li>
      <li>232</li>
      <li>233</li>
      <li>234</li>
      <li>235</li>
      <li>236</li>
      <li>237</li>
      <li>238</li>
      <li>239</li>
      <li>240</li>
      <li>241</li>
      <li>242</li>
      <li>243</li>
      <li>244</li>
      <li>245</li>
      <li>246</li>
      <li>247</li>
      <li>248</li>
      <li>249</li>
      <li>250</li>
      <li>251</li>
      <li>252</li>
      <li>253</li>
      <li>254</li>
      <li>255</li>
      <li>256</li>
      <li>257</li>
      <li>258</li>
      <li>259</li>
      <li>260</li>
      <li>261</li>
      <li>262</li>
      <li>263</li>
      <li>264</li>
      <li>265</li>
      <li>266</li>
      <li>267</li>
      <li>268</li>
      <li>269</li>
      <li>270</li>
      <li>271</li>
      <li>272</li>
      <li>273</li>
      <li>274</li>
      <li>275</li>
      <li>276</li>
      <li>277</li>
      <li>278</li>
      <li>279</li>
      <li>280</li>
      <li>281</li>
      <li>282</li>
      <li>283</li>
      <li>284</li>
      <li>285</li>
      <li>286</li>
      <li>287</li>
      <li>288</li>
      <li>289</li>
      <li>290</li>
      <li>291</li>
      <li>292</li>
      <li>293</li>
      <li>294</li>
      <li>295</li>
      <li>296</li>
      <li>297</li>
      <li>298</li>
      <li>299</li>
      <li>300</li>
      <li>301</li>
      <li>302</li>
      <li>303</li>
      <li>304</li>
      <li>305</li>
      <li>306</li>
      <li>307</li>
      <li>308</li>
      <li>309</li>
      <li>310</li>
      <li>311</li>
      <li>312</li>
      <li>313</li>
      <li>314</li>
      <li>315</li>
      <li>316</li>
      <li>317</li>
      <li>318</li>
      <li>319</li>
      <li>320</li>
      <li>321</li>
      <li>322</li>
      <li>323</li>
      <li>324</li>
      <li>325</li>
      <li>326</li>
      <li>327</li>
      <li>328</li>
      <li>329</li>
      <li>330</li>
      <li>331</li>
      <li>332</li>
      <li>333</li>
      <li>334</li>
      <li>335</li>
      <li>336</li>
      <li>337</li>
      <li>338</li>
      <li>339</li>
      <li>340</li>
      <li>341</li>
      <li>342</li>
      <li>343</li>
      <li>344</li>
      <li>345</li>
      <li>346</li>
      <li>347</li>
      <li>348</li>
      <li>349</li>
      <li>350</li>
      <li>351</li>
      <li>352</li>
      <li>353</li>
      <li>354</li>
      <li>355</li>
      <li>356</li>
      <li>357</li>
      <li>358</li>
      <li>359</li>
      <li>360</li>
      <li>361</li>
      <li>362</li>
      <li>363</li>
      <li>364</li>
      <li>365</li>
      <li>366</li>
      <li>367</li>
      <li>368</li>
      <li>369</li>
      <li>370</li>
      <li>371</li>
      <li>372</li>
      <li>373</li>
      <li>374</li>
      <li>375</li>
      <li>376</li>
      <li>377</li>
      <li>378</li>
      <li>379</li>
      <li>380</li>
      <li>381</li>
      <li>382</li>
      <li>383</li>
      <li>384</li>
      <li>385</li>
      <li>386</li>
      <li>387</li>
      <li>388</li>
      <li>389</li>
      <li>390</li>
      <li>391</li>
      <li>392</li>
      <li>393</li>
      <li>394</li>
      <li>395</li>
      <li>396</li>
      <li>397</li>
      <li>398</li>
      <li>399</li>
      <li>400</li>
      <li>401</li>
      <li>402</li>
      <li>403</li>
      <li>404</li>
      <li>405</li>
      <li>406</li>
      <li>407</li>
      <li>408</li>
      <li>409</li>
      <li>410</li>
      <li>411</li>
      <li>412</li>
      <li>413</li>
      <li>414</li>
      <li>415</li>
      <li>416</li>
      <li>417</li>
      <li>418</li>
      <li>419</li>
      <li>420</li>
      <li>421</li>
      <li>422</li>
      <li>423</li>
      <li>424</li>
      <li>425</li>
      <li>426</li>
      <li>427</li>
      <li>428</li>
      <li>429</li>
      <li>430</li>
      <li>431</li>
      <li>432</li>
      <li>433</li>
      <li>434</li>
      <li>435</li>
      <li>436</li>
      <li>437</li>
      <li>438</li>
      <li>439</li>
      <li>440</li>
      <li>441</li>
      <li>442</li>
      <li>443</li>
      <li>444</li>
      <li>445</li>
      <li>446</li>
      <li>447</li>
      <li>448</li>
      <li>449</li>
      <li>450</li>
      <li>451</li>
      <li>452</li>
      <li>453</li>
      <li>454</li>
      <li>455</li>
      <li>456</li>
      <li>457</li>
      <li>458</li>
      <li>459</li>
      <li>460</li>
      <li>461</li>
      <li>462</li>
      <li>463</li>
      <li>464</li>
      <li>465</li>
      <li>466</li>
      <li>467</li>
      <li>468</li>
      <li>469</li>
      <li>470</li>
      <li>471</li>
      <li>472</li>
      <li>473</li>
      <li>474</li>
      <li>475</li>
      <li>476</li>
      <li>477</li>
      <li>478</li>
      <li>479</li>
      <li>480</li>
      <li>481</li>
      <li>482</li>
      <li>483</li>
      <li>484</li>
      <li>485</li>
      <li>486</li>
      <li>487</li>
      <li>488</li>
      <li>489</li>
      <li>490</li>
      <li>491</li>
      <li>492</li>
      <li>493</li>
      <li>494</li>
      <li>495</li>
      <li>496</li>
      <li>497</li>
      <li>498</li>
      <li>499</li>
      <li>500</li>
      <li>501</li>
      <li>502</li>
      <li>503</li>
      <li>504</li>
      <li>505</li>
      <li>506</li>
      <li>507</li>
      <li>508</li>
      <li>509</li>
      <li>510</li>
      <li>511</li>
      <li>512</li>
      <li>513</li>
      <li>514</li>
      <li>515</li>
      <li>516</li>
      <li>517</li>
      <li>518</li>
      <li>519</li>
      <li>520</li>
      <li>521</li>
      <li>522</li>
      <li>523</li>
      <li>524</li>
      <li>525</li>
      <li>526</li>
      <li>527</li>
      <li>528</li>
      <li>529</li>
      <li>530</li>
      <li>531</li>
      <li>532</li>
      <li>533</li>
      <li>534</li>
      <li>535</li>
      <li>536</li>
      <li>537</li>
      <li>538</li>
      <li>539</li>
      <li>540</li>
      <li>541</li>
      <li>542</li>
      <li>543</li>
      <li>544</li>
      <li>545</li>
      <li>546</li>
      <li>547</li>
      <li>548</li>
      <li>549</li>
      <li>550</li>
      <li>551</li>
      <li>552</li>
      <li>553</li>
      <li>554</li>
      <li>555</li>
      <li>556</li>
      <li>557</li>
      <li>558</li>
      <li>559</li>
      <li>560</li>
      <li>561</li>
      <li>562</li>
      <li>563</li>
      <li>564</li>
      <li>565</li>
      <li>566</li>
      <li>567</li>
      <li>568</li>
      <li>569</li>
      <li>570</li>
      <li>571</li>
      <li>572</li>
      <li>573</li>
      <li>574</li>
      <li>575</li>
      <li>576</li>
      <li>577</li>
      <li>578</li>
      <li>579</li>
      <li>580</li>
      <li>581</li>
      <li>582</li>
      <li>583</li>
      <li>584</li>
      <li>585</li>
      <li>586</li>
      <li>587</li>
      <li>588</li>
      <li>589</li>
      <li>590</li>
      <li>591</li>
      <li>592</li>
      <li>593</li>
      <li>594</li>
      <li>595</li>
      <li>596</li>
      <li>597</li>
      <li>598</li>
      <li>599</li>
      <li>600</li>
      <li>601</li>
      <li>602</li>
      <li>603</li>
      <li>604</li>
      <li>605</li>
      <li>606</li>
      <li>607</li>
      <li>608</li>
      <li>609</li>
      <li>610</li>
      <li>611</li>
      <li>612</li>
      <li>613</li>
      <li>614</li>
      <li>615</li>
      <li>616</li>
      <li>617</li>
      <li>618</li>
      <li>619</li>
      <li>620</li>
      <li>621</li>
      <li>622</li>
      <li>623</li>
      <li>624</li>
      <li>625</li>
      <li>626</li>
      <li>627</li>
      <li>628</li>
      <li>629</li>
      <li>630</li>
      <li>631</li>
      <li>632</li>
      <li>633</li>
      <li>634</li>
      <li>635</li>
      <li>636</li>
      <li>637</li>
      <li>638</li>
      <li>639</li>
      <li>640</li>
      <li>641</li>
      <li>642</li>
      <li>643</li>
      <li>644</li>
      <li>645</li>
      <li>646</li>
      <li>647</li>
      <li>648</li>
      <li>649</li>
      <li>650</li>
      <li>651</li>
      <li>652</li>
      <li>653</li>
      <li>654</li>
      <li>655</li>
      <li>656</li>
      <li>657</li>
      <li>658</li>
      <li>659</li>
      <li>660</li>
      <li>661</li>
      <li>662</li>
      <li>663</li>
      <li>664</li>
      <li>665</li>
      <li>666</li>
      <li>667</li>
      <li>668</li>
      <li>669</li>
      <li>670</li>
      <li>671</li>
      <li>672</li>
      <li>673</li>
      <li>674</li>
      <li>675</li>
      <li>676</li>
      <li>677</li>
      <li>678</li>
      <li>679</li>
      <li>680</li>
      <li>681</li>
      <li>682</li>
      <li>683</li>
      <li>684</li>
      <li>685</li>
      <li>686</li>
      <li>687</li>
      <li>688</li>
      <li>689</li>
      <li>690</li>
      <li>691</li>
      <li>692</li>
      <li>693</li>
      <li>694</li>
      <li>695</li>
      <li>696</li>
      <li>697</li>
      <li>698</li>
      <li>699</li>
      <li>700</li>
      <li>701</li>
      <li>702</li>
      <li>703</li>
      <li>704</li>
      <li>705</li>
      <li>706</li>
      <li>707</li>
      <li>708</li>
      <li>709</li>
      <li>710</li>
      <li>711</li>
      <li>712</li>
      <li>713</li>
      <li>714</li>
      <li>715</li>
      <li>716</li>
      <li>717</li>
      <li>718</li>
      <li>719</li>
      <li>720</li>
      <li>721</li>
      <li>722</li>
      <li>723</li>
      <li>724</li>
      <li>725</li>
      <li>726</li>
      <li>727</li>
      <li>728</li>
      <li>729</li>
      <li>730</li>
      <li>731</li>
      <li>732</li>
      <li>733</li>
      <li>734</li>
      <li>735</li>
      <li>736</li>
      <li>737</li>
      <li>738</li>
      <li>739</li>
      <li>740</li>
      <li>741</li>
      <li>742</li>
      <li>743</li>
      <li>744</li>
      <li>745</li>
      <li>746</li>
      <li>747</li>
      <li>748</li>
      <li>749</li>
      <li>750</li>
      <li>751</li>
      <li>752</li>
      <li>753</li>
      <li>754</li>
      <li>755</li>
      <li>756</li>
      <li>757</li>
      <li>758</li>
      <li>759</li>
      <li>760</li>
      <li>761</li>
      <li>762</li>
      <li>763</li>
      <li>764</li>
      <li>765</li>
      <li>766</li>
      <li>767</li>
      <li>768</li>
      <li>769</li>
      <li>770</li>
      <li>771</li>
      <li>772</li>
      <li>773</li>
      <li>774</li>
      <li>775</li>
      <li>776</li>
      <li>777</li>
      <li>778</li>
      <li>779</li>
      <li>780</li>
      <li>781</li>
      <li>782</li>
      <li>783</li>
      <li>784</li>
      <li>785</li>
      <li>786</li>
      <li>787</li>
      <li>788</li>
      <li>789</li>
      <li>790</li>
      <li>791</li>
      <li>792</li>
      <li>793</li>
      <li>794</li>
      <li>795</li>
      <li>796</li>
      <li>797</li>
      <li>798</li>
      <li>799</li>
      <li>800</li>
      <li>801</li>
      <li>802</li>
      <li>803</li>
      <li>804</li>
      <li>805</li>
      <li>806</li>
      <li>807</li>
      <li>808</li>
      <li>809</li>
      <li>810</li>
      <li>811</li>
      <li>812</li>
      <li>813</li>
      <li>814</li>
      <li>815</li>
      <li>816</li>
      <li>817</li>
      <li>818</li>
      <li>819</li>
      <li>820</li>
      <li>821</li>
      <li>822</li>
      <li>823</li>
      <li>824</li>
      <li>825</li>
      <li>826</li>
      <li>827</li>
      <li>828</li>
      <li>829</li>
      <li>830</li>
      <li>831</li>
      <li>832</li>
      <li>833</li>
      <li>834</li>
      <li>835</li>
      <li>836</li>
      <li>837</li>
      <li>838</li>
      <li>839</li>
      <li>840</li>
      <li>841</li>
      <li>842</li>
      <li>843</li>
      <li>844</li>
      <li>845</li>
      <li>846</li>
      <li>847</li>
      <li>848</li>
      <li>849</li>
      <li>850</li>
      <li>851</li>
      <li>852</li>
      <li>853</li>
      <li>854</li>
      <li>855</li>
      <li>856</li>
      <li>857</li>
      <li>858</li>
      <li>859</li>
      <li>860</li>
      <li>861</li>
      <li>862</li>
      <li>863</li>
      <li>864</li>
      <li>865</li>
      <li>866</li>
      <li>867</li>
      <li>868</li>
      <li>869</li>
      <li>870</li>
      <li>871</li>
      <li>872</li>
      <li>873</li>
      <li>874</li>
      <li>875</li>
      <li>876</li>
      <li>877</li>
      <li>878</li>
      <li>879</li>
      <li>880</li>
      <li>881</li>
      <li>882</li>
      <li>883</li>
      <li>884</li>
      <li>885</li>
      <li>886</li>
      <li>887</li>
      <li>888</li>
      <li>889</li>
      <li>890</li>
      <li>891</li>
      <li>892</li>
      <li>893</li>
      <li>894</li>
      <li>895</li>
      <li>896</li>
      <li>897</li>
      <li>898</li>
      <li>899</li>
      <li>900</li>
      <li>901</li>
      <li>902</li>
      <li>903</li>
      <li>904</li>
      <li>905</li>
      <li>906</li>
      <li>907</li>
      <li>908</li>
      <li>909</li>
      <li>910</li>
      <li>911</li>
      <li>912</li>
      <li>913</li>
      <li>914</li>
      <li>915</li>
      <li>916</li>
      <li>917</li>
      <li>918</li>
      <li>919</li>
      <li>920</li>
      <li>921</li>
      <li>922</li>
      <li>923</li>
      <li>924</li>
      <li>925</li>
      <li>926</li>
      <li>927</li>
      <li>928</li>
      <li>929</li>
      <li>930</li>
      <li>931</li>
      <li>932</li>
      <li>933</li>
      <li>934</li>
      <li>935</li>
      <li>936</li>
      <li>937</li>
      <li>938</li>
      <li>939</li>
      <li>940</li>
      <li>941</li>
      <li>942</li>
      <li>943</li>
      <li>944</li>
      <li>945</li>
      <li>946</li>
      <li>947</li>
      <li>948</li>
      <li>949</li>
      <li>950</li>
      <li>951</li>
      <li>952</li>
      <li>953</li>
      <li>954</li>
      <li>955</li>
      <li>956</li>
      <li>957</li>
      <li>958</li>
      <li>959</li>
      <li>960</li>
      <li>961</li>
      <li>962</li>
      <li>963</li>
      <li>964</li>
      <li>965</li>
      <li>966</li>
      <li>967</li>
      <li>968</li>
      <li>969</li>
      <li>970</li>
      <li>971</li>
      <li>972</li>
      <li>973</li>
      <li>974</li>
      <li>975</li>
      <li>976</li>
      <li>977</li>
      <li>978</li>
      <li>979</li>
      <li>980</li>
      <li>981</li>
      <li>982</li>
      <li>983</li>
      <li>984</li>
      <li>985</li>
      <li>986</li>
      <li>987</li>
      <li>988</li>
      <li>989</li>
      <li>990</li>
      <li>991</li>
      <li>992</li>
      <li>993</li>
      <li>994</li>
      <li>995</li>
      <li>996</li>
      <li>997</li>
      <li>998</li>
      <li>999</li>
      <li>1000</li>
    </ul>
    <script>
      var lis = document.querySelectorAll(".list li");
      var observer = new IntersectionObserver(function (entries) {
        // 2 这里会接收到所有被观察的 dom 对象
        for (var i = 0; i < entries.length; i++) {
          //遍历所以被观察对象，判断其是否出现在视口
          if (entries[i].isIntersecting) {
            //为true则表示出现在视口，然后为其添加出现样式
            entries[i].target.classList.remove("hide");
            entries[i].target.classList.add("show");
          } else {
            //为false则表示消失在视口，然后为其添加消失样式
            //这里是判断li是否是往下消失
            entries[i].target.classList.remove("show");
            entries[i].target.classList.add("hide");
          }
        }
      });
      for (var i = 0; i < lis.length; i++) {
        observer.observe(lis[i]);
        // 1 给所有li添加监听观察
      }
      function getSafeBound(_i, _max, _min, _bound = 3){
        if (_i - _bound < _min) {
            return [_min, _i + _bound]
        }else if(_i + _bound > _max){
            return [_max - _i, _max]
        }else {
          return [_i - _bound, _i + _bound]
        }
      }
    </script>
    <div></div>
  </body>
</html>
